<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>我的家乡</title>
  <link rel="stylesheet" href="./style.css" />
  <style>
    #input {
      display: flex;
      align-items: center;
    }

    #input>input {
      outline: none;
      border: 1px solid #2196f3;
      height: 25px;
      margin-top: 5px;

    }

    #input>button {
      width: 60px;
      height: 25px;
      background-color: #2196f3;
      color: white;
      border: none;
      margin-top: 3px;
    }

    table {
      width: 1200px;
      border-collapse: collapse;
      margin: 0 auto;
    }

    th,
    td {
      padding: 8px;
      text-align: left;
      border-bottom: 1px solid #ddd;
    }

    tr:hover {
      background-color: #f5f5f5;
    }

    .btn {
      cursor: pointer;
      padding: 4px 8px;
      margin: 2px;
    }

    .form-container {
      width: 1200px;
      margin: 0 auto;
      margin-bottom: 20px;
    }

    input[type="text"],
    input[type="file"] {
      width: 100%;
      padding: 8px;
      box-sizing: border-box;
    }
  </style>
</head>

<body>
  <!-- 头部 -->
  <div class="header">
    <div class="container cl">
      <div class="logo fl">
        <a href="../index.html">我的家乡-武汉</a>
      </div>
      <div class="nav fr">
        <ul>
          <li><a href="../index.html">首页</a></li>
          <li><a href="sub1.html">美食之都</a></li>
          <li><a href="sub2.html">人文景观</a></li>
          <li><a href="sub3.html">精彩活动</a></li>
          <li><a href="sub4.html">照片集锦</a></li>
          <li><a href="sub7.html" class="on">设置</a></li>
          <li id="input"><input type="text"><button>搜索</button></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="loginOutF">
    <button id="logOut" class="loginOut">退出登录</button>
  </div>

  <!-- 管理员面板 -->
  <div id="adminChange">
    <!-- 形式用于添加新景点 -->
    <div class="form-container">
      <h3>添加新景点</h3>
      <input type="text" id="newTitle" placeholder="景点标题" required />
      <br /><br />
      <textarea id="newDesc" placeholder="景点描述" required style="width: 1200px;"></textarea>
      <br /><br />
      <input type="file" id="newImage" accept="image/*" />
      <br /><br />
      <button onclick="addLandscape()">添加景点</button>
    </div>

    <!-- 表格显示所有景点 -->
    <table id="landscapeTable" class="table">
      <thead>
        <tr>
          <th>序号</th>
          <th>景点标题</th>
          <th>景点描述</th>
          <th>封面图片</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <!-- 数据将通过JavaScript动态插入 -->
      </tbody>
    </table>
  </div>

  <!-- 底部 -->
  <div class="footer">
    <p>四季武汉，樱花荷塘枫叶雪‌</p>
  </div>
  <script src="./js/login.js"></script>
  <script src="./js/logOut.js"></script>
  <script src="./js/landscapeManager.js"></script>

</body>


</html>